{include file="public/header" /}
<blockquote class="layui-elem-quote">
    数据库
</blockquote>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">数据库</li>
        <li>数据文件</li>
    </ul>
    <div class="layui-tab-content">
        <!-- 数据库内容 -->
        <div class="layui-tab-item layui-show">
            <table id="table" lay-filter="table"></table>
        </div>
        <!-- 数据文件内容 -->
        <div class="layui-tab-item">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>备份时间</th>
                        <th width="150">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $files as $k=>$v}
                    <tr>
                        <td><a href="/backup/{$v.id}" target="_blank"
                                onmouseover="layer.tips('点击下载', this);">{$v.name}</a> </td>
                        <td>{$v.time}</td>
                        <td>
                            <button type="button" class="layui-btn layui-btn-warm layui-btn-xs" data-name="{$v.id}"
                                kllxs-on="RESTORE">还原</button>
                            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" data-name="{$v.id}"
                                kllxs-on="DEL-FILE">删除</button>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script>
    layui.use(["table", "dropdown", "util", "popup", "jquery"], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var util = layui.util;
        var popup = layui.popup;
        var $ = layui.$;

        // 表单
        table.render({
            elem: "#table",
            url: "{:route('admin.mysql.query')}",
            toolbar: '<div><button type="button" class="layui-btn layui-btn-normal layui-btn-xs" kllxs-on="add">添加</button></div>',
            cols: [[
                { type: 'numbers', fixed: 'left', title: "序号", align: 'center' },
                {
                    title: '名称', field: 'TABLE_NAME', align: 'center',
                    templet: `<div><a href="javascript:;" kllxs-on="FIELDS" onmouseover="layer.tips('点击查看字段', this);">{{= d.TABLE_NAME }}</a></div>`
                },
                { title: '备注', field: 'TABLE_COMMENT', align: 'center' },
                { title: '长度', field: 'AUTO_INCREMENT', align: 'center' },
                {
                    title: "操作", fixed: 'right', align: 'center',
                    templet: `<div>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" kllxs-on="more" data-id="{{= d.TABLE_NAME }}">
                                更多
                                <i class="layui-icon layui-icon-down"></i>
                            </button>
                        </div>`
                }
            ]],
            method: "post"
        })

        util.on("kllxs-on", {
            more: function () {
                var data_id = $(this).attr("data-id")
                dropdown.render({
                    elem: this, // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                    show: true,
                    data: [{
                        title: '一键菜单',
                        id: "curd"
                    }, {
                        title: '备份',
                        id: "backup"
                    }, {
                        title: '编辑',
                        id: "edit"
                    }, {
                        title: '删除',
                        id: "del"
                    }],
                    click: function (obj) {
                        if (obj.id === "backup") {
                            $.post('{:route("admin.mysql.backups")}', { table: data_id }, function (res) {
                                popup.msg(res)
                            })
                        } else if (obj.id === "edit") {
                            popup.iframe(`{:route("admin.mysql.edit")}?table=${data_id}`)
                        } else if (obj.id === "curd") {
                            popup.iframe(`{:route("admin.mysql.curd")}?table=${data_id}`)
                        } else {
                            popup.confirm(`{:route("admin.mysql.del")}`, { table: data_id })
                        }
                    }
                });
            },
            add: function () {
                popup.iframe(`{:route("admin.mysql.add")}`)
            },
            RESTORE: function () {
                var name = $(this).attr("data-name");
                popup.confirm(`{:route("admin.mysql.restore")}`,
                    { name: name },
                    "post",
                    "可能会覆盖现有数据哦,确定还原吗?")
            },
            "DEL-FILE": function () {
                var name = $(this).attr("data-name");
                popup.confirm(`{:route("admin.mysql.delFile")}`,
                    { name: name })
            },
            FIELDS: function () {
                var table = $(this).html();
                popup.iframe(`{:route("admin.mysql.fields")}?table=${table}`)
            }
        })



    })
</script>